<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="../css/index.css">
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?lgwgu4');
            src: url('fonts/icomoon.eot?lgwgu4#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?lgwgu4') format('truetype'),
                url('fonts/icomoon.woff?lgwgu4') format('woff'),
                url('fonts/icomoon.svg?lgwgu4#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        .one {
            font-family: 'icomoon';
            color: #ff5f00;
            margin-left: 10px;
        }
        .show h3 span {
            font-family: 'icomoon';
            color: #ff5f00;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="head">
        <span>欢迎来到宠物有家平台</span>
        <div>
            <span><a href="./login.html">登录</a></span>
            <i>|</i>
            <span><a href="">注册</a> </span>
            <span><span class="one"></span> 购物车</span>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav w">
        <img src="../image/logo.webp" alt="">
        <div class="nav1">
            <ul>
                <li>汪星人</li>
                <li>喵星人</li>
                <li>爱鸟</li>
                <li>小兔</li>
                <li>萌鼠</li>
                <li>小龟</li>
            </ul>
        </div>
        <div class="nav2">
            <input type="text">
            <button>搜素爱宠</button>
        </div>
    </div>
    <!-- banner栏 -->
    <div class="banner w">
        <div class="banner-left">
            <ul>
                <a href="">
                    <li>泰迪<i>>></i></li>
                </a>
                <a href="">
                    <li>拉布拉多<i>>></i></li>
                </a>
                <a href="">
                    <li>波斯猫<i>>></i></li>
                </a>
                <a href="">
                    <li>短毛猫<i>>></i></li>
                </a>
                <a href="">
                    <li>安哥拉<i>>></i></li>
                </a>
                <a href="">
                    <li>垂耳兔<i>>></i></li>
                </a>
                <a href="">
                    <li>香猪<i>>></i></li>
                </a>
                <a href="">
                    <li>八哥<i>>></i></li>
                </a>
                <a href="">
                    <li>银狐<i>>></i></li>
                </a>
                <a href="">
                    <li>孔雀<i>>></i></li>
                </a>
            </ul>
        </div>
        <div class="banner-center">
            <img src="../image/1.webp" alt="" width="650px" height="400px">
        </div>
        <div class="banner-right">
            <h4>热门宠物</h4>
            <ul>
                <li> <i>1</i> 金毛犬</li>
                <li> <i>2</i> 藏獒</li>
                <li> <i>3</i> 哈士奇</li>
                <li> <i>4</i> 孟加拉豹猫</li>
                <li> <i>5</i> 小白兔</li>
                <li> <i>6</i> 熊猫图</li>
                <li> <i>7</i> 白熊仓鼠</li>
                <li> <i>8</i> 奶茶</li>
                <li> <i>9</i> 热带鱼</li>
                <li> <i>10</i> 布丁</li>
            </ul>
        </div>
    </div>
    <!-- 商品展示栏 -->
    <div class="show w">
        <h3><span></span> 站长推荐</h3>
        <hr style="width: 1169px; height: 3px; background-color: #ff5f00 ;">
        <ul>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 6000.0</div>
            </li>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 7000.0</div>
            </li>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 8000.0</div>
            </li>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 9000.0</div>
            </li>
        </ul>
    </div>
    <div class="show w">
        <h3><span></span> 站长推荐</h3>
        <hr style="width: 1169px; height: 3px; background-color: #ff5f00 ;">
        <ul>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 6000.0</div>
            </li>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 7000.0</div>
            </li>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 8000.0</div>
            </li>
            <li>
                <img src="../image/1.webp" alt="" width="280px">
                <div><span>名称:</span> 纯种萨摩耶</div>
                <div><span>价格:</span> 9000.0</div>
            </li>
        </ul>
    </div>
</body>

</html>